import React, { useState } from 'react';
import './Tabs.css';

interface TabProps {
  title: string;
  content: React.ReactNode;
}

interface TabsProps {
  tabs: TabProps[];
}

const Tabs: React.FC<TabsProps> = ({ tabs }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="tabs">
      <div className="tab-list">
        {tabs.map((tab: TabProps, index: number) => {
          const { title } = tab;
          const isActive = activeTab === index;

          return (
            <button
              key={title}
              className={`tab-btn ${isActive ? 'activ' : ''}`}
              onClick={() => setActiveTab(index)}
            >
              {title}
            </button>
          );
        })}
      </div>
      <div  className="tab-content">{tabs[activeTab].content}</div>
    </div>
  );
};

export default Tabs;